<template>
    <orh-trees del="del" @on-del="confirm" add="add" @on-add="addSilde" reload @on-reload="refresh" search
               :searchOption="typeliat" :searchOptionSelected="searchOptionSelected" @on-search="searchmt">
        <Tree :data="trees" slot="trees" @on-select-change="eclassInformation"></Tree>
        <orh-sub-table pages :pageDate="pageDate" @on-page-change="Information" slot="content">
            <Table :data="StudentList" :columns="columns1" @on-selection-change="selectOne" highlight-row
                   :loading="tableload" slot="table"></Table>
        </orh-sub-table>
        <orh-sidebar v-model="show" :title="pageTitle" cover slot="others">
            <component :is='which_to_show' :otherTreeEclassid="otherTreeEclassid" :typeother="'eclass'" :infoId='infoId'
                       @showParent='showParent=>show=showParent' @backList='backList'></component>
        </orh-sidebar>
    </orh-trees>
</template>
<script>
    export default {
        name: "studentfilesmodule-studentbasicinformationclass",
        components: {
            Operation: resolve => {
                require(['./../StudentBasicInformation/Operation.vue'], resolve);
            },
            StudentBasicInformationLook: resolve => {
                require(['./../Public/StudentBasicInformationLook.vue'], resolve);
            },
        },
        data() {
            return {

                searchOptionSelected: 'student_name',
                typeliat: [
                    {
                        value: 'student_name',
                        label: '姓名',
                    },
                    {
                        value: 'student_learncode',
                        label: '学号',
                    },
                    {
                        value: 'identityard_num',
                        label: '身份证号',
                    },
                ],

                tableload: true,
                show: false,

                listUrl: 'api/student/v1/studentlearnstatus/my_eclass_names?page=',
                delUrl: 'api/student/v1/studentbase/delete/',

                otherTreeEclassid: null,//用于点击树形的班级后在点击添加信息后把班级和年级保存
                trees: [],
                pageDate: {
                    total: 0,
                    current_page: 1,
                    per_page: 10
                },
                pageTitle: null,//右边页面的title

                which_to_show: "",//判断修改或添加组件显示与否
                StudentList: [],//学生变量
                infoId: null,//用于向修改页面传id值
                loadingbut: false,
                del: [],//删除

                columns1: [
                    {
                        type: 'selection',
                        fixed: 'left',
                        width: 60,
                        align: 'center',
                    },
                    {
                        title: '学号',
                        width: 180,
                        key: 'student_learncode'
                    },
                    {
                        title: '姓名',
                        width: 120,
                        render: (h, params) => {
                            console.log(params)
                            let student_name = params.row.student_name != null ? params.row.student_name.zh : params.row.student_name.mn
                            return h('div', student_name);
                        },
                    },
                    {
                        title: '性别',
                        width: 80,
                        render: (h, params) => {
                            let sexname = params.row.sexs.dictionary_name.zh ? params.row.sexs.dictionary_name.zh : params.row.sexs.dictionary_name.mn
                            return h('div', sexname);
                        }
                    },
                    {
                        title: '民族',
                        width: 120,
                        render: (h, params) => {
                            let sexname = params.row.ehnic.dictionary_name.zh ? params.row.ehnic.dictionary_name.zh : params.row.ehnic.dictionary_name.mn
                            return h('div', sexname);
                        }
                    },
                    {
                        title: '出生年月',
                        width: 150,
                        key: 'birthday'
                    },
                    {
                        title: '身份证号',
                        width: 180,
                        key: 'identityard_num'
                    },
                    {
                        title: ' ',
                    },
                    {
                        title: '操作',
                        key: 'operation',
                        fixed: 'right',
                        width: 180,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    directives: [
                                        {
                                            name: "button",
                                            value: "look"
                                        }
                                    ],
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.look(params.row.student_base_id)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    directives: [
                                        {
                                            name: "button",
                                            value: "edit"
                                        }
                                    ],
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.update(params.row.student_base_id)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    directives: [
                                        {
                                            name: "button",
                                            value: "del"
                                        }
                                    ],
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.del = [params.row.student_base_id]
                                            this.confirm()
                                        }
                                    }
                                }, '删除'),
                            ]);
                        }
                    }
                ],
            }
        },
        methods: {
            /************************************************************
             *
             * 我的班级
             *
             ************************************************************/
            load() {
                this.$http.get('api/safety/v1/certifications/classlist')
                    .then(res => {
                        this.trees = res.data.map((item) => {
                            let arr = {
                                title: item.eclass_name.zh + '(' + item.grade_eclass.grade.grade_name.zh + ')',
                                value: item.eclass_id,
                            }
                            return arr
                        })
                        if (this.trees.length == 1) {
                            this.otherTreeEclassid = this.trees[0].value
                        }
                        this.Information()
                    })
                    .catch(err => {
                        if (err.code && err.code == 422) {
                            this.$Message.error(err.message);
                        }
                    })

            },

            /************************************************************
             *
             * 点击班级获取学生的数据
             *
             ************************************************************/
            eclassInformation(eclass_id) {
                this.otherTreeEclassid = eclass_id[0].value
                this.listUrl = 'api/student/v1/studentlearn/class_names?eclass_id=' + eclass_id[0].value + '&page='
                this.Information()
            },

            /************************************************************
             *
             * 获取学生的数据
             *
             ************************************************************/
            Information(index = 1) {
                this.tableload = true
                this.StudentList = []
                this.$http.get(this.listUrl + index).then(val => {
                    let str = val.data
                    console.log(val)
                    this.StudentList = str.map((item) => {
                        return item.studentbase ? item.studentbase : null
                    })
                    this.pageDate.total = val.pages.total
                    this.pageDate.per_page = parseInt(val.pages.per_page)
                    this.pageDate.current_page = val.pages.current_page
                    this.tableload = false//加载完数据动画结束
                }).catch(err => {
                    console.log(err);
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                    this.tableload = false//加载完数据动画结束
                })
            },


            /************************************************************
             *
             * 点击添加
             *
             ************************************************************/
            addSilde() {
                this.show = true
                this.infoId = false
                this.which_to_show = 'Operation'
                this.pageTitle = '添加'
            },

            /************************************************************
             *
             * 点击编辑
             *
             ************************************************************/
            update(index) {
                this.infoId = index
                this.show = true
                this.which_to_show = 'Operation'
                this.pageTitle = '修改'
            },

            /************************************************************
             *
             * 点击查看
             *
             ************************************************************/
            look(index) {
                this.show = true
                this.infoId = index
                this.pageTitle = '查看'
                this.which_to_show = 'StudentBasicInformationLook';
            },
            /************************************************************
             *
             * 修改添加返回数据更新
             *
             ************************************************************/
            backList(val, student_base_id) {
                if (val == true) {
                    this.infoId = student_base_id
                    this.Information();
                }
            },

            /************************************************************
             *
             * 批量删除
             *
             ************************************************************/
            selectOne(index) {
                this.del = index.map(item => item.student_base_id)
            },

            /************************************************************
             *
             * 执行删除操作
             *
             ************************************************************/
            confirm() {
                this.$Modal.confirm({
                    title: '数据删除',
                    content: '<p>您确定要删除这些数据吗?</p>',
                    onOk: () => {
                        if (this.del.length == 0) {
                            this.$Message.error('请选择删除项');
                            return
                        }
                        this.del = JSON.stringify(this.del)
                        this.tableload = true
                        this.$http.delete(`${this.delUrl}${this.del}`)
                            .then(val => {
                                this.del = []
                                this.Information();
                                this.$Message.success(val.message);
                            })
                            .catch(err => {
                                if (err.code && err.code == 422) {
                                    this.$Message.error(err.message);
                                }
                                this.del = []
                                this.tableload = false
                            })
                    },
                });
            },

            /************************************************************
             *
             * 刷新数据（当前分页）
             *
             ************************************************************/
            refresh() {
                this.Information()
            },

            /************************************************************
             *
             * 搜索操作
             *
             ************************************************************/
            searchmt(str, val) {
                this.listUrl = 'api/student/v1/studentlearnstatus/my_eclass_names?searchtype=' + val + '&searchvalue=' + str + '&page=',
                    this.Information()
            },

        },
        mounted() {
            this.load()

        }
    }
</script>
